import React, { FC } from 'react';
import { TabBar, Icon } from '@/components';
import { MenusType, MyRouteProps } from '@/common/types';
import { history } from 'umi';
import './index.less';

export interface MenuBarProps {
  pathname: string;
  routes: MyRouteProps[];
  menus: MenusType[];
}

const MenuBar: FC<MenuBarProps> = (props) => {
  const { routes, pathname, children, menus } = props;
  const tabMenu: any[] = [];
  menus.forEach((m) => {
    routes.forEach((route) => {
      if (route?.path?.includes(m.key) && route.isMenu) {
        tabMenu.push({
          ...m,
          ...route,
        });
      }
    });
  });
  return (
    <TabBar>
      {tabMenu.map(({ title, icon, selectedIcon, path }) => (
        <TabBar.Item
          key={path}
          title={title}
          icon={<Icon type={icon} />}
          selectedIcon={<Icon type={selectedIcon} />}
          selected={pathname === path}
          onPress={() => history.push(`${path}`)}
        >
          {/* 匹配到的children路由进行渲染 */}
          {pathname === path && children}
        </TabBar.Item>
      ))}
    </TabBar>
  );
};

MenuBar.defaultProps = {
  prefixCls: 'menu-bar',
};

export default MenuBar;
